<template>
    <div>
        <tree-transfer :title="title" :props="listProps" :from_data='fromData' :to_data='toData' :defaultProps="{label:'name'}" @addBtn='add' @removeBtn='remove'
            :transferOpenNode='false' :defaultTransfer='true' :defaultCheckedKeys='checkedNode' height='300px'>
        </tree-transfer>
    </div>
</template>

<script>
import treeTransfer from "el-tree-transfer"; // 引入
import commonApi from "@/api/common";
export default {
    props: {
        //接收父组件数据
        index: Number,
        checkedIds: Array
    },
    data() {
        return {
            title: ["待选", "已选"],
            mode: "transfer",
            listProps: {
                children: "children",
            },
            fromData: [],
            toData: [],
            checkedNode: []
        };
    },
    
    created() {
        this.getRegoin();
    },
    methods: {
        getRegoin() {
            commonApi.getTwoLevelRegion().then(response => {
                if (response.data.code!==200) {
                    this.$message.error(response.data.msg);
                    return false;
                }
                this.fromData = response.data.data;
                this.checkedNode = this.checkedIds;
            });
        },

        // 监听穿梭框组件添加
        add(fromData, toData, obj) {
            const ids = [];
            toData.forEach(item => {
                item.children.forEach(childItem => {
                    ids.push(childItem.id)
                });
            });
            this.$emit("change-checked", {
                area: ids,
                index: this.index
            });
        },
        // 监听穿梭框组件移除
        remove(fromData, toData, obj) {
            const ids = [];
            toData.forEach(item => {
                item.children.forEach(childItem => {
                    ids.push(childItem.id)
                });
            });
            this.$emit("change-checked", {
                area: ids,
                index: this.index
            });
        }
    },
    components: { treeTransfer } // 注册
};
</script>>